import React, { useEffect, useState } from 'react';
import {
  Button,
  Descriptions,
  Result,
  Avatar,
  Space,
  Statistic,
  Menu,
  Dropdown,
  Tabs,
  Alert,
  message,
} from 'antd';
import { LikeOutlined, UserOutlined } from '@ant-design/icons';
import ProLayout, {
  PageContainer,
  SettingDrawer,
} from '@ant-design/pro-layout';
import { history, useRequest } from 'umi';
import NaviByRole from './_defaultProps';

const { TabPane } = Tabs;
const initialPanes = [
  {
    title: '/LabAchievements/ScientificResearch/Paper',
    content: '/LabAchievements/ScientificResearch/Paper',
    key: '1',
    closable: false,
  },
];

export default (props: any) => {
  const [pathname, setPathname] = useState(
    localStorage.getItem('identity') === '学生'
      ? '/PostgraduateDevelop/PersonalManagement'
      : '/LabAchievements/ScientificResearch/Paper',
  );
  const [panes, setPanes] = useState(initialPanes);
  const [activeKey, setActiveKey] = useState(initialPanes[0].key);

  useEffect(() => {
    setPathname(
      history.location.pathname || '/LabAchievements/ScientificResearch/Paper',
    );
  }, []);
  useEffect(() => {
    // console.log('路径变了');
    if (
      panes.length === 1 &&
      panes[0].content === '/LabAchievements/ScientificResearch/Paper' &&
      history.location.pathname !== '/LabAchievements/ScientificResearch/Paper'
    ) {
      let newpanes: any = panes;
      newpanes.push({
        title: history.location.pathname,
        content: history.location.pathname,
        key: panes.length + '',
      });
      setPanes(newpanes);
    } else {
    }
  }, [history.location.pathname]);
  //登出请求
  const logOut = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/logout/submit',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
      onSuccess: () => {
        localStorage.clear();
        history.push('/');
      },
    },
  );
  const menu = (
    <Menu>
      <Menu.Item
        key={'logout'}
        onClick={() => {
          logOut.run();
        }}
      >
        退出登陆
      </Menu.Item>
    </Menu>
  );

  return (
    <div
      id="test-pro-layout"
      style={{
        height: '100vh',
      }}
    >
      <ProLayout
        route={NaviByRole()}
        location={{ pathname }}
        // location: {
        //   pathname: '/LabAchievements/ScientificResearch/Paper',
        // },
        // collapsed={false}
        title={'国重实验室'}
        // waterMarkProps={{
        //     content: 'Pro Layout',
        // }}
        onMenuHeaderClick={(e) => console.log(e)}
        menuItemRender={(item, dom) => (
          <a
            onClick={() => {
              if (localStorage.getItem('fulfil') === '0') {
                message.warning('请完善个人基本信息！');
              } else {
                history.push(
                  item.path || '/LabAchievements/ScientificResearch/Paper',
                );
                setPathname(
                  item.path || '/LabAchievements/ScientificResearch/Paper',
                );
              }
            }}
          >
            {dom}
          </a>
        )}
        rightContentRender={() => (
          <Space>
            {/* <Button
              onClick={() => {
                console.log(JSON.parse(localStorage.getItem('auth')));
                console.log(localStorage.getItem('identitySub'));
              }}
            >
              测试
            </Button> */}
            <Dropdown overlay={menu}>
              <a onClick={(e) => e.preventDefault()}>
                <Avatar shape="square" size="small" icon={<UserOutlined />} />
              </a>
            </Dropdown>
            <div style={{ marginTop: 3 }}>
              欢迎：{localStorage.getItem('account')}
            </div>
          </Space>
        )}
        fixSiderbar={true}
        // headerContentRender={() =>
        // <Alert
        //   message="Very long warning text warning text text text text text text text"
        //   banner
        //   closable
        // />
        //   // return <Tabs
        //   //     type="editable-card"
        //   //     onChange={onChange}
        //   //     activeKey={activeKey}
        //   //     hideAdd={true}
        //   //     onEdit={onEdit}
        //   // >
        //   //     {panes.map(pane => (
        //   //         <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
        //   //         </TabPane>
        //   //     ))}
        //   // </Tabs>
        // }
      >
        {props.children}
      </ProLayout>
    </div>
  );
};
